<template>
  <div class="login" :style="{height:loginHeight,width:loginWidth}">
    <hlvy-loading :fullscreenLoading="loadingShow" :text="'登录中······'"></hlvy-loading>
    <div class="logdiv center">
      <!-- <marquee
        style="position: absolute;left: 0%;top: 2%;color: #409EFF;font-size: 19px"
      >{{msgValue}}</marquee>-->
      <hlvy-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        :rules="rules"
        label-width="100px"
        class="demo-dynamic form"
      >
        <hlvy-form-item prop="loginName" label="用户名: ">
          <hlvy-input style="width: 70%" v-model="dynamicValidateForm.loginName"></hlvy-input>
        </hlvy-form-item>
        <br />
        <hlvy-form-item :label="'密码: '" prop="loginPwd">
          <hlvy-input style="width: 70%" type="password" v-model="dynamicValidateForm.loginPwd"></hlvy-input>
        </hlvy-form-item>
        <br />
        <hlvy-form-item :label="'验证码: '" prop="loginyzm">
          <hlvy-input style="width: 70%;" type="text" v-model="dynamicValidateForm.loginyzm"></hlvy-input>&emsp;
          <span @click="randyzm()" class="verCode">{{yzmn}}</span>
        </hlvy-form-item>
        <hlvy-form-item>
          <!-- <p class="loginp">
            <hlvy-checkbox v-model="dynamicValidateForm.checked" class="loginckd">记住密码</hlvy-checkbox>
          </p>-->
          <div v-text="prompt" style="color:red"></div>
          <hlvy-button class="loginbtn btnLogin" @click="submitForm('dynamicValidateForm')">登录</hlvy-button>
        </hlvy-form-item>
      </hlvy-form>
    </div>
  </div>
</template>

<script>
import { stripscript } from "@/utils/validate.js";
import { reactive, ref, isRef, toRefs, onMounted } from "@vue/composition-api";
import { userLogin } from "@/api/login";
import {setToken,setUserName,setUserImg} from "@/utils/cookie.js"
export default {
  name: "login",
  // setup(props, context) {
    // console.log(context)
    setup(props, {refs,root}) {
    //data数据
    //验证用户名
    let validateUsername = (rule, value, callback) => {
      // var value=stripscript(value);//过滤掉特殊字符
      dynamicValidateForm.loginName = value;
      if (value == "") {
        callback(new Error("请输入用户名"));
      }
    };
    //验证密码
    let validatePassword = (rule, value, callback) => {
      // var value=stripscript(value);
      let reg = /^\d{6}$/;
      if (value == "") {
        callback(new Error("请输入密码"));
      }
      // else if (!reg.test(value)) {
      //   callback(new Error("密码格式错误"));
      // }
      else {
        callback();
      }
    };
    //验证验证码
    let validateCode = (rule, value, callback) => {
      let reg = yzm.value.toUpperCase(); //value.toUpperCase();
      if (value == "") {
        callback(new Error("请输入验证码"));
      } else if (reg != value.toUpperCase()) {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    };
    let loginHeight = ref("100%");
    let loginWidth = ref("100%");
    let dynamicValidateForm = reactive({
      loginName: ref("lihaiqin"),
      loginPwd: ref("123456"),
      loginyzm: ref("")
      // checked: ref(true)
    });
    let rules = reactive({
      loginName: reactive([{ validator: validateUsername, trigger: "blur" }]),
      loginPwd: reactive([{ validator: validatePassword, trigger: "blur" }]),
      loginyzm: reactive([{ validator: validateCode, trigger: "blur" }])
    });
    let yzmn = ref("");
    let yzm = ref("");
    let loadingShow = ref(false);
    let msgValue = ref("用户名密码随便输入哦······");
    let prompt = ref("");

    //onmounted
    onMounted(() => {
      wdht();
      randyzm();
    });

    //methods
    let wdht = () => {
      loginHeight.value = window.innerHeight + "px";
      loginWidth.value = window.innerWidth + "px";
    };
    let randyzm = () => {
      //生成随机验证码

      let code = "";
      let coden = "";
      var codeLength = 4; //验证码的长度

      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z"
      ); //随机数
      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * 62); //取得随机数的索引（0~61）
        code += random[index]; //根据索引取得随机数加到code上
        coden += random[index] + " "; //根据索引取得随机数加到code上
      }
      yzm.value = code; //把code值赋给验证码
      yzmn.value = coden; //把code值赋给验证码
    };

    let submitForm = formName => {
      // console.log(refs[formName].validate(valid=>{}))表单校验有问题
      let param = {
        userName: dynamicValidateForm.loginName,
        password: dynamicValidateForm.loginPwd,
        loginyzm: dynamicValidateForm.loginyzm
      };
      prompt.value="";
      refs[formName].validate(valid => {});
      if (
        param.userName !== "" &&
        param.password != "" &&
        param.loginyzm.toUpperCase() == yzm.value.toUpperCase()
      ) {
        loadingShow.value = !loadingShow.value;
        userLogin(param).then(
          res => {
            
            if (res.data.err == 0) {
				console.log(res.data)
				setToken(res.data.token);
				setUserName(res.data.userMessage.userName);
				setUserImg(res.data.userMessage.userImg)
              setTimeout(() => {
                loadingShow.value = false;
                root.$router.push({ path: "/home" });
              }, 500);

            } else {
              setTimeout(() => {
                loadingShow.value = false;
                prompt.value = res.data.msg;
                randyzm();
              }, 1000);
            }
          },
          err => {
            console.log(err);
          }
        );
      } else {
        loadingShow.value = false;
        console.log("error submit!!");
        return false;
      }
    };

    return {
      validateUsername,
      validatePassword,
      validateCode,
      loginHeight,
      loginWidth,
      dynamicValidateForm,
      rules,
      yzm,
      yzmn,
      loadingShow,
      msgValue,
      prompt,

      wdht,
      randyzm,
      submitForm
    };
  }

  // components: {
  //   storage
  // },
  // created() {

  //   //登录添加键盘事件,注意,不能直接在焦点事件上添加回车
  //   let that = this;
  //   document.onkeydown = function(e) {
  //     let key = window.event.keyCode;
  //     if (key === 13) {
  //       that.submitForm("dynamicValidateForm");
  //     }
  //   };

  // },
};
</script>

<style scoped>
.login {
  position: relative;
  background: url("../../assets/images/login/login.png") no-repeat;
  background-size: cover;
}

.logdiv {
  width: 44%;
  height: 50%;
  filter: alpha(opacity=70); /*支持 IE 浏览器*/
  -moz-opacity: 0.7; /*支持 FireFox 浏览器*/
  opacity: 0.7; /*支持 Chrome, Opera, Safari 等浏览器*/
  border-radius: 10px;
  box-shadow: 0 0 1px #5e91ff inset;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16%;
  margin-left: -22%;
}
.form {
  margin-top: 10%;
  margin-left: 10%;
}
.el-form-item {
  margin-bottom: 0;
}
.loginbtn {
  width: 60%;
  margin-left: 4%;
  margin-top: 2%;
}
.loginckd {
  width: 60%;
  margin-left: 46%;
}

.verCode {
  display: inline-block;
  text-align: center;
  width: 90px;
  font-size: 20px;
  height: 32px;
  color: #2b3b4b;
  background-color: #1ea7fe;
}
</style>

/**
* 修改登录按钮样式
*/

<style>
.logdiv .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.loginp .el-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid #409eff;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;

  z-index: 1;
  -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
</style>
